<template>
  <DragHandle
    v-if="editor"
    :editor="editor"
    class="editor-drag-handle"
    :compute-position-config="{
      placement: 'left-start',
      strategy: 'absolute',
    }"
    :on-node-change="handleNodeChange"
  >
    <div class="editor-drag-handle__handler">
      <DragHandleButton
        :node="selectedNode"
        :pos="selectedNodePos"
        v-if="
          editor &&
          (!editor.isEmpty ||
            editor.isActive('table') ||
            editor.isActive('callout'))
        "
        @dropdown-visible="handleDropdownVisible"
      />
      <!-- <DragHandleButton /> -->
    </div>
  </DragHandle>
</template>

<script setup lang="ts">
import { inject, ref } from "vue";
import DragHandle from "../drag-handle/index.vue";
import DragHandleButton from "../common/index.vue";
import type { Node } from "@tiptap/pm/model";

defineOptions({
  name: "BlockMenu",
});

const editor = inject<any>("editor");
console.log("editor", editor.value);
let selectedNode = ref<Node | null>(null);
let selectedNodePos = ref<number | null>(null);

const handleNodeChange = ({ node, editor, pos }: any) => {
  selectedNode.value = node ?? null;
  if (pos !== null) {
    selectedNodePos.value = pos;
  }
};

const handleDropdownVisible = (visible: boolean) => {
  // 处理菜单显示/隐藏状态
  console.log("Menu visible:", visible);
  if (editor?.value) {
    editor.value.commands.setMeta("lockDragHandle", visible);
  }
};
</script>

<style lang="scss" scoped>
.editor-drag-handle {
  &-drag-handle.is-empty {
    .editor-drag-handle__handler {
      margin-top: 2px;
    }
  }
  &__handler {
    position: absolute;
    display: flex;
    right: 0px;
    top: -2px;
    padding-right: 15px;
    @media print {
      display: none;
    }
    &.selected-node {
      &-table,
      &-horizontalRule,
      &-ProseMirror-gapcursor {
        margin-top: 5px;
      }
      &-pageBreak {
        margin-top: -6px;
      }
    }
  }
  &__dropdown {
    .editor-drag-handle__group-name {
      padding-left: 15px !important;
    }
    .dropdown__menu,
    .dropdown__submenu {
      --td-radius-default: 0;
      padding: 8px 0 !important;
      .divider {
        margin: 4px 0 2px;
        opacity: 0.5;
      }
      .dropdown__item {
        padding: 2px 0;
        min-width: 140px !important;
        .editor-drag-handle__button {
          background-color: transparent;
          padding: 0 15px;
          box-sizing: border-box;
          justify-content: flex-start;
          width: 100%;
          &-wrap {
            display: block !important;
          }
          .button__text {
            width: 100%;
          }
        }
        .editor-drag-handle__button-content {
          width: 100%;
          justify-content: flex-start;
          .button-text {
            color: var(--editor-text-color);
          }
          .button-icon {
            margin-right: 3px;
            font-size: 16px;
            color: #666;
          }
          .button-kbd {
            flex: 1;
            text-align: right;
            color: var(--editor-text-color-light);
            font-family: Arial, Helvetica, sans-serif;
            font-size: 9px;
          }
          .heading {
            display: flex;
            color: var(--editor-text-color);
            .icon-heading {
              font-size: 12px;
              display: inline-block;
              width: 2em;
            }
          }
        }
        &--disabled {
          .editor-drag-handle__button-content {
            opacity: 0.6;
          }
        }
        &-direction {
          opacity: 0.4;
          font-size: 12px !important;
          margin-right: 8px;
        }
        .dropdown-item-label {
          padding: 1px 15px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }

    .delete-node {
      .button {
        * {
          color: var(--editor-error-color) !important;
        }
      }
    }
  }
}

.ProseMirror-noderangeselection {
  *::selection {
    background: transparent;
  }
  * {
    caret-color: transparent;
  }
}
</style>
